import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Table,DatePicker,Input,Button ,Pagination} from 'antd';
import styles from './index.less';
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
const dateFormat = 'YYYY/MM/DD';
import moment from 'moment';
const Pages = ({ pointroadVale, dispatch, loading }) => {
    const columns = [
        {
            title: '巡检点名称',
            dataIndex: 'point_name',
        },
        {
            title: '所属计划名称',
            dataIndex: 'plan_name',
        },
        {
            title: '实际巡检次数',
            dataIndex: 'actual_num',
        },
        {
            title: '计划巡检次数',
            dataIndex: 'plan_num',
        },
        {
            title: '计划完成次数',
            dataIndex: 'complete_num',
        },
        {
            title: '漏检次数',
            dataIndex: 'leave_num',
        },
        {
            title: '漏检率',
            dataIndex: 'leave_rate',
        },
        {
            title: '不合格次数',
            dataIndex: 'unqualified_num',
        },
        {
            title: '不合格率',
            dataIndex: 'unqualified_rate',
        },

    ];
    return(
        <div className={styles.container}>
            <PagesGET dispatch={dispatch} {...pointroadVale}/>
            <Table
                columns={columns}
                rowKey={id=>id.id}
                pagination={false}
                loading={loading.global}
                size="small"
                dataSource={pointroadVale.getRoadValueData || null} />
            <Pagination current={pointroadVale.pages} showTotal={total => `共计 ${total} 条`}
                style={{float: 'right', margin: 10}} size="small" total={pointroadVale.total}
                onChange={pages => { !loading.global && dispatch({type:'pointplan/save',payload:{pages:pages}});}}/>
        </div>
    );
};

class PagesGET extends React.Component {

    constructor (props) {
        super(props);
        this.state = {
            item_num: "",
            item_name :"",
            startTime:'',
            endTime:'',
            time:[],
        };
    }

    // 实例化生命周期函数1
    componentWillMount () {
        //判断是否登录
        this.props.dispatch({type:"pointroadVale/getRoadValue",payload:{
            duty_name:'',
            point_name:'',
            end_time:'',
            start_time:'',
            pageNumber :1,
            pageSize :10,
        }});
    }

    render (){
        let {time} = this.state;
        return(<div className={styles.constructorit}>
            <RangePicker value={time[0]?[moment(time[0], dateFormat), moment(time[1], dateFormat)]:[]} style={{margin:10 }}
                onChange={(date,dateString)=>{
                    this.setState({
                        startTime:dateString[0],
                        endTime:dateString[1],
                        time:dateString,
                    });
                }} />
            <Input value={this.state.item_num} placeholder="巡检⼈员" style={{margin:10,width:256}} onChange={e=>this.setState({item_num:e.target.value})} />
            <Input value={this.state.item_type} placeholder="巡检点名称" style={{margin:10,width:256}} onChange={e=>this.setState({item_type:e.target.value})} />
            <Button style={{margin:10}} type='primary' onClick={()=>{
                this.props.dispatch({type:"pointroadVale/getRoadValue",payload:{
                    duty_name:this.state.item_num,
                    point_name:this.state.item_type,
                    end_time:this.state.endTime,
                    start_time:this.state.startTime,
                    pageNumber :this.props.pages,
                    pageSize :10,
                }});
            }
            }>查询</Button>
            <Button style={{margin:10,zIndex:9999}} onClick={()=>{
                this.setState({
                    item_num:'',
                    item_type:'',
                    time:[],
                });
            }}>重置</Button>
        </div>);
    }
    componentWillReceiveProps (nextProps) {
        if(nextProps.pages !== this.props.pages){
            let {duty_name,point_name,end_time,start_time} = this.state;
            this.props.dispatch({type:"pointroadVale/getRoadValue",payload:{
                duty_name:duty_name,
                point_name:point_name,
                end_time:end_time,
                start_time:start_time,
                pageNumber :nextProps.pages ==0?1:nextProps.pages,
                pageSize :10,
            }});
        }
    }

}

Pages.propTypes = {
    pointroadVale: PropTypes.object,
    loading: PropTypes.object,
    dispatch: PropTypes.func,
};

export default connect(({ pointroadVale, loading }) => ({ pointroadVale, loading }))(Pages);
